<template>
    <!-- html结构 -->
    <div class="person">

        <h1>person PAGE</h1>
        <p>姓名：{{ name }}</p>
        <p>年龄：{{ age }}</p>
        <p>性别：{{ sex }}</p>
        <p>爱好：{{ hobby }}</p>
        <button @click="showContact">查看联系方式</button>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<!-- <script lang="ts">
// 下载插件 npm i vite-plugin-vue-set-up-extend
// 实现组件名简写
// export default {
//     name: 'person',//组件名 

// }
</script> -->
<!-- setup语法糖,不用写setup函数，不用再return暴露 -->
<script setup lang="ts" name="person123">
    let age=18
    let name='张三'
    let hobby='football'
    let sex='男'
    function showContact() {
        alert('联系方式：123456789')
    }
    function changeAge() {
        age=age+1
    }
    function changeName() {
        name='王五'
    }


</script>

<style>
/* css样式 */
.person {
    background-color: #f66;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 15px;
}
</style>
